<!--
Copyright (c) 2009 Google Inc.

You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Instaright Dashboard</title>
        <link rel="stylesheet" href="/css/style.css" type="text/css"/>
        <link rel="alternate" href="#" type="application/atom+xml" title="Instaright Dashboard"/>
        <head>
                <script type="text/javascript" src="http://www.google.com/jsapi"></script>
                <script type="text/javascript" src="/static/javascript/util.js"></script>
                <script type="text/javascript" src="/static/javascript/util.js"></script>
                <script type="text/javascript" src="/static/javascript/chart.js"></script>
                <script type="text/javascript">
                        google.load('visualization', '1', {packages: ['imagechart']});
                        google.load('jquery', '1.4.2');
                </script>
                <script type="text/javascript">
                        google.setOnLoadCallback(drawVisualization);
                        google.load(drawVisualization);
                </script>
                <script type="text/javascript">
                        $(document).ready(function()
                                  {
                                        $(".menu_body").hide();
                                        $(".menu_body_daily").show();
                                        $(".social_media").click(function(){
                                                $(this).next(".menu_body").slideToggle(100);
                                                $(this).next(".menu_body_daily").slideToggle(100);
                                                });	
                                        });
                 </script>
         </head>

         <body>
                 <div id="header" class="container_24">
                         <div style="text-align: left">
                                 <ul>
                                                 <li><a href="/">Instaright home</a></li>
                                </ul>
                        </div>
                 </div>
                 <div class="wrapper">
                         <div id="content" class="container_24">
                                 <div id="left_col" class="grid_18">
                                         <div class="left_box_mid_no_pading">
                                                 <h1><a href="#"></a></h1>
                                                 <div class="stats_body">
                                                         <div id="statsHeader" ></div>
                                                         <div id="visualization" style="width: 400px; height: 400px;"></div>
                                                         <div id="visualization1" style="width: 400px; height: 400px;"></div>

                                                 </div>
                                         </div>
                                 </div>
                                 <div id="right_col" class="grid_6">
                                         <div id="right_box_top">
                                                <p style="text-align: center;">Instaright Firefox addon</p>
                                                <p style="text-align: center;"><a title="Instapaper firefox addon" href="https://addons.mozilla.org/en-US/firefox/addon/13317/"><img src="/static/images/download_instaright.png" style="width:220px; height: 60px;" alt="Instapaper firefox addon"/></a></p>
                                                <div class="text-align: center; width: 270px;">
                                                        <ul>
                                                                <li>
                                                                        <p class="social_media">Domain Stats in last 5 days
                                                                                <p class="menu_body_daily">
                                                                                 {% for d in dailyStats %}
                                                                                 <a href="#" onclick="drawVisualization(0, this.innerHTML);" >{{ d }}</a><br>
                                                                                {%endfor%}
                                                                                </p>
                                                                        </p>
                                                                </li>
                                                                <li>
                                                                        <p class="social_media">Domain Stats in last 5 weeks
                                                                                <p class="menu_body">
                                                                                {% for d in weeklyStats %}
                                                                                <a href="#" onclick="drawVisualization(1, this.innerHTML);" >{{ d }}</a><br>
                                                                                {%endfor%}
                                                                                </p>
                                                                        </p>
                                                                </li>
                                                                <li>
                                                                        <p class="social_media">Link Volume
                                                                        <p class="menu_body">
                                                                        <a href="#" onclick="drawVisualization(3);" >Latest Link/User Ratio</a>
                                                                        </p>
                                                                        </p>
                                                                </li>
                                                                <li>
                                                                        <p class="social_media">Most Instaright Countries
                                                                        <p class="menu_body">
                                                                        <a href="#" onclick="drawVisualization(4);" >All Time</a>
                                                                        </p></p>
                                                                </li>
                                                                <li>
                                                                        <p class="social_media"> Most Instaright Cities
                                                                        <p class="menu_body">
                                                                        <a href="#" onclick="drawVisualization(5);" >All Time</a>
                                                                        </p></p>
                                                                </li>
                                                                <li>
                                                                        <p class="social_media"> Most Instaright Users
                                                                                <p class="menu_body">
                                                                                {% for d in userStats %}
                                                                                <a href="#" onclick="drawVisualization(6, this.innerHTML);" >{{ d }}</a><br>
                                                                                {%endfor%}
                                                                                </p>
                                                                        </p>
                                                                </li>
                                                        </ul>
                                                 </div>
                                         </div>
                                 </div>

                         </div>
                 </div>
                <div class="clearfix"></div> 
                </div>
                 <div class="footer-container">
                        <div style="position: relative; text-align: center; color: rgb(0, 0, 204); font-size: small;">
                        <p><a href="mailto:gbabun@gmail.com">contact</a> | <a href="http://twitter.com/bojanbabic">twitter</a> | <a href="http://bojanbabic.blogspot.com">blog</a></p>
                 </div>
                 </div>

         </body>
 </html>

